<template>
<div class="other-wrap">
  <div class="time">{{date}}</div>
  <div class="header">{{name}}</div>
  <div class='other-info-right'>
    <div class="name">{{name}}</div>
    <div class="msg">{{msg}}</div>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      date: ''
    }
  },
  mounted () {
    this.$el.scrollIntoView()
    var date = new Date()
    this.date = date.getFullYear() + '-' + getStr(date.getMonth() + 1) + '-' + getStr(date.getDate()) + ' ' + getStr(date.getHours()) + ':' + getStr(date.getMinutes()) + ':' + getStr(date.getSeconds())
    function getStr (str) {
      if (str < 10) {
        str = '0' + str
      }
      return str
    }
  },
  props: ['msg', 'name']
}
</script>
<style scoped>
.other-wrap{
  overflow:hidden;
  padding:20px 5px;
  overflow:hidden;
}
.header{
  float:left;
  line-height:1.5;
}
.other-info-right{
  float:left;
  max-width:66%;
  margin-left:10px;
}
.time{
  text-align:left;
  font-size:12px;
  color:#999;
  margin-bottom:10px;
}
.name{
  font-size:12px;
  color:#666;
  margin:0 0 5px;
}
.msg{
  background:#95BEE4;
  color:#fff;
  padding:10px 20px;
  border-top-left-radius:10px;
  border-bottom-right-radius:10px;
  border-top-right-radius:35px;
  border-bottom-left-radius:35px;
}
</style>
